<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>数据获取 | Vue Router</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="apple-touch-icon" href="https://v3.router.vuejs.org/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="https://v3.router.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="description" content="Vue.js 官方的路由管理器。">
    <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    
    <link rel="preload" href="static/css/0.styles.136ede33.css" as="style"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/app.5cb068d1.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/4.1430b5a5.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/3.51f41756.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/109.0d861fad.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/7.b1ef01fe.js" as="script"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/10.31570374.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/100.f5a92b3f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/101.ee7125f5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/102.d6663468.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/103.52eae1a0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/104.c3f7f210.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/105.eeea8ced.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/106.1c26feed.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/107.45f15a23.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/108.67b3498d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/11.23ce75fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/110.817be425.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/111.1ff37cf8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/112.0f4bcc2b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/113.33f197d8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/114.59d11efc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/115.e29513c5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/116.d3be25ed.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/117.520112d7.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/118.4e8860bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/119.822915fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/12.f9f5c1d4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/120.64de5730.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/121.d14483d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/122.809b1d6c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/123.dfafa172.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/124.e1cdb337.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/125.093b479c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/13.db1acc91.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/14.17c88755.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/15.6700843a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/16.84949dd1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/17.8f87f2ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/18.90f9825b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/19.196286e9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/20.8a2eefe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/21.9e49382e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/22.0bdc0b6f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/23.83b61690.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/24.445c95b4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/25.40493d84.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/26.2a95a52d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/27.1856a4c3.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/28.9f6e959e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/29.06df98c9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/30.be9a3758.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/31.2751df13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/32.3df6388b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/33.73d91d13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/34.42fa6d43.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/35.92c4dbe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/36.3cb64f0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/37.d00b8ad5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/38.8cfdc40e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/39.663f424b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/40.d5721761.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/41.0dd61abe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/42.d09ca009.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/43.539e190a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/44.7907e586.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/45.273a044f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/46.8680fbf0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/47.f68a4eb9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/48.3616928b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/49.bf7cdfd5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/5.2d9bb619.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/50.ec7d6bdf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/51.6c2151bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/52.b853c8bc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/53.14dd74fd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/54.63232eeb.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/55.9582f69a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/56.4b1cd6ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/57.a027b996.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/58.07b675b0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/59.bb8da942.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/6.02bc56cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/60.67d68613.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/61.f5eb4a0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/62.d0da6098.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/63.c3bfaec4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/64.56511c8c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/65.b0d60684.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/66.e066bc4d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/67.fdc123f4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/68.b78eaac4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/69.ab78abab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/70.6ca6222a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/71.442171e5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/72.12cba91d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/73.258ad65e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/74.42a25693.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/75.dcf907be.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/76.39d8dfc2.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/77.ef3ec9f9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/78.4c82cfbf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/79.b5d92855.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/8.dee4ab51.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/80.d55e87d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/81.cf409eab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/82.fd3a33a6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/83.0e5cf847.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/84.28b2a6b8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/85.3a729073.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/86.c985b80b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/87.62964e61.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/88.ceb8b07d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/89.2c0b86ae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/9.a79fac11.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/90.b80f9f69.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/91.ecc4a957.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/92.2165392e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/93.de463e4e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/94.b595fcb4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/95.5eb09d5f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/96.221390cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/97.4daa1cf5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/98.860a2ac1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/99.33c3adae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/vendors~docsearch.2dc030f4.js">
    <link rel="stylesheet" href="static/css/0.styles.136ede33.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="main-container" data-v-84121532=""><div class="theme-container" data-v-84121532=""><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index4.html" class="home-link router-link-active"><!----> <span class="site-name">Vue Router</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div class="sponsors sponsors-top" data-v-84121532=""><span data-v-84121532="">Platinum Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-84121532=""></a></div> <ul class="sidebar-links"><li><a href="installation2.html" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="index10.html" aria-current="page" class="sidebar-link">起步</a></li><li><a href="dynamic-matching2.html" class="sidebar-link">动态路由匹配</a></li><li><a href="nested-routes2.html" class="sidebar-link">嵌套路由</a></li><li><a href="navigation2.html" class="sidebar-link">编程式的导航</a></li><li><a href="named-routes2.html" class="sidebar-link">命名路由</a></li><li><a href="named-views2.html" class="sidebar-link">命名视图</a></li><li><a href="redirect-and-alias2.html" class="sidebar-link">重定向和别名</a></li><li><a href="passing-props2.html" class="sidebar-link">路由组件传参</a></li><li><a href="history-mode2.html" class="sidebar-link">HTML5 History 模式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="navigation-guards2.html" class="sidebar-link">导航守卫</a></li><li><a href="meta2.html" class="sidebar-link">路由元信息</a></li><li><a href="transitions2.html" class="sidebar-link">过渡动效</a></li><li><a href="" aria-current="page" class="active sidebar-link">数据获取</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#导航完成后获取数据" class="sidebar-link">导航完成后获取数据</a></li><li class="sidebar-sub-header"><a href="#在导航完成前获取数据" class="sidebar-link">在导航完成前获取数据</a></li></ul></li><li><a href="scroll-behavior2.html" class="sidebar-link">滚动行为</a></li><li><a href="lazy-loading2.html" class="sidebar-link">路由懒加载</a></li><li><a href="navigation-failures2.html" class="sidebar-link">导航故障</a></li></ul></section></li></ul> <div class="sponsors" data-v-84121532=""><span data-v-84121532="">Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-84121532=""></a></div></aside> <main class="page"><div class="carbon-ads" data-v-84121532=""></div> <div class="theme-default-content content__default"><h1 id="数据获取"><a href="#数据获取" class="header-anchor">#</a> 数据获取</h1> <p>有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：</p> <ul><li><p><strong>导航完成之后获取</strong>：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。</p></li> <li><p><strong>导航完成之前获取</strong>：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。</p></li></ul> <p>从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。</p> <h2 id="导航完成后获取数据"><a href="#导航完成后获取数据" class="header-anchor">#</a> 导航完成后获取数据</h2> <p>当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 <code>created</code> 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。</p> <p>假设我们有一个 <code>Post</code> 组件，需要基于 <code>$route.params.id</code> 获取文章数据：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      Loading...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ error }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>{{ post.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ post.body }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token literal-property property">post</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 组件创建完后获取数据，</span>
    <span class="token comment">// 此时 data 已经被 observed 了</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果路由有变化，会再次执行该方法</span>
    <span class="token string-property property">'$route'</span><span class="token operator">:</span> <span class="token string">'fetchData'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">fetchData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> <span class="token keyword">null</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token comment">// replace getPost with your data fetching util / API wrapper</span>
      <span class="token function">getPost</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> post</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> err<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> post
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="在导航完成前获取数据"><a href="#在导航完成前获取数据" class="header-anchor">#</a> 在导航完成前获取数据</h2> <p>通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的  <code>beforeRouteEnter</code> 守卫中获取数据，当数据获取成功后只调用 <code>next</code> 方法。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">post</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">getPost</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> post</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token parameter">vm</span> <span class="token operator">=&gt;</span> vm<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 路由改变前，组件就已经渲染完了</span>
  <span class="token comment">// 逻辑稍稍不同</span>
  <span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> <span class="token keyword">null</span>
    <span class="token function">getPost</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> post</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">setData</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> post</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> err<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> post
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="transitions2.html" class="prev">
        过渡动效
      </a></span> <span class="next"><a href="scroll-behavior2.html">
        滚动行为
      </a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper" data-v-84121532=""><div class="bsa-cpc"></div></div></main></div></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.5cb068d1.js" defer=""></script><script src="static/js/4.1430b5a5.js" defer=""></script><script src="static/js/3.51f41756.js" defer=""></script><script src="static/js/109.0d861fad.js" defer=""></script><script src="static/js/7.b1ef01fe.js" defer=""></script>
  </body>
</html>
